<template>
  <div class="app-container">
    <div class="set-div">
      <fab-list ref="fabList" class="fab-list" />
      <programList ref="programList" class="program-list" />
    </div>
    <el-button class="update-btn" style="margin-left: 48%;width:140px" size="small" type="primary" @click="update">更新</el-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { VxeListMixin } from '@/mixins/VxeListMixin'
import fabList from './children/fabListIndex.vue'
import programList from './children/programListIndex.vue'

export default {
  name: 'Dashboard',
  components: {
    fabList,
    programList
  },
  mixins: [VxeListMixin],
  data() {
    return {
      projectId: null
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  created() {
    if (this.$route.query && this.$route.query.projectId) {
      this.projectId = this.$route.query.projectId.toString()
    }
    // this.tableHeightFun()
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {
      this.$refs.fabList.init(this.projectId)
      this.$refs.programList.init(this.projectId)
    },
    update() {
      this.$refs.fabList.setFabList(this.projectId)
      this.$refs.programList.setProgramList(this.projectId)
    }
  }
}
</script>

<style lang="scss" scoped>
.set-div{
    height: calc(100vh - 150px);
    overflow: auto;
    // scrollbar-width: none;
    // overflow-y: hidden;
    // display: flex;
    // justify-content: space-between;
}
.set-div::-webkit-scrollbar {
    display: none;
}

.fab-list{
    width:100%;
}
.program-list{
    width:100%
}
</style>

